有了前面好幾天的 domain knowledge 補充和實驗之後，在今天，我們要來規劃使用者流程與功能。一但決定之後，就是熬夜寫 code 的任務啦。

TL;DR（大方向）

1. 做一個類似著色本的網頁，讓使用者可以挑選想要調教的 Emoji，並且透過 color input 選擇想要的顏色，這實際上就是透過 override-colors 的 css 取代其中的某幾個顏色。
2. 在完成後，可以將結果下載成圖片、或是透過網址跟其他人分享。而其他人在打開該網址之後，可以接續創作，不需要從頭開始創作。
3. 目標是用 javascript 解決的 static website，至少目前列下來的要求好像沒有後端介入的需要。未來如果想要做類似 Gallery 那樣展示的功能再說吧！

功能需求

同時也回顧我們之前的內容。

1. 為了確保瀏覽器的友善支援程度，必須使用 COLR/CPAL 格式 (DAY 18) 的 Emoji (DAY 20)。否則要不是沒辦法在 Chrome 裡面打開、要不就是沒辦法在 Safari 裡面打開；後者尤其重要，因為在 iPhone 和 iPad 上的所有瀏覽器都是套皮的 Safari，現在應該沒有網頁敢不支援行動裝置端的（吧）。
   • 考量我們的老朋友 Noto Color Emoji 是 COLR/CPAL v1 的格式，雖然支援漸層、部件重複調用等進階的色彩功能，但在 Safari 上無法正常顯示，這點就有點尷尬。
   • 所以，我們改用 Twitter 設計、Mozilla 重新打包成 COLR/CPAL v0 格式的 Twemoji，這在所有的主流瀏覽器上都能正確顯示。
2. 要有一個 Emoji List 的 Picker 讓使用者可以挑選想要的 Emoji，這方面目前打算使用既有的 Emoji Mart (DAY 24) 來實現。
   • 在選取後，藉由 window.location.href 的方式，將該 Emoji 的 Unicode (DAY 05) 資訊寫入網址。
3. 選取 Emoji 之後，透過 FontKit 拆包字型檔案 (DAY 22)，讀取 Emoji 字串的 COLR/CPAL table 裡面的色版資訊。
   • 舉例來説，「🍎 U+1F34E」在 Twemoji 裡面的色號編號是 2、8、197，對應第 2、8、197 個色號。
4. 將色號轉換為 Color Picker (DAY 23) 們，讓使用者可以挑選想要的顏色。
   • 舉例來説，第 2、8、197 個色號，在 Twemoji 裡面對應的是 #DD2E44、#77B255、#662113。
5. 因為有部分的 Emoji（像是家庭、國旗、膚色、職業）是透過 ccmp 的 feature (DAY 13) 來組合的，如果直接解析字串，對應的碼位並不等同實際顯示字符的色號，因此，必須要透過拆包工具分析 ccmp 的 LookupType 4 (DAY 16)，獲取實際映射字符的色版。
   • 舉例來説，消防員的 Emoji 「🧑‍🚒」實際上 (DAY 20) 是「🧑 大人 U+1F9D1 - ZWJ U+200D - 🚒 消防車 U+1F692」的組合，並沒有單獨的 Unicode 碼位。
   • 如果按照 3. 的方法，只會讀取到 🧑 的色號 4、8、194、649 和 🚒 的色號 2、3、4、12、58、478、594，但實際上的 🧑‍🚒 的色號是 4、8、9、58、194、214、222、649、706、772、773、760，並沒有重疊，假如直接讀取字串的話，無論怎麼換都不會換到實際的顏色，所以必須額外把 ccmp 組合字符的色號撈出來。
6. 在使用者換色的同時，藉由 window.location.href 的方式，將自定義的色號寫入網址，此為唯一值。使用者或是其他第三人可以透過同樣的網址回溯著色的進度。
7. 允許使用者下載換色後的圖片 (DAY 25)。